import { useRouter } from 'next/router';
import { ConfigProvider } from 'antd';
import { Provider } from 'react-redux';
import stores from '@/store';
import locale from 'antd/lib/locale/zh_CN';
import 'moment/locale/zh-cn';

// 引入head，title，keywords，description
import Head from 'next/head';
import Tkd from '@/ssr/tkd';
// 引入第三方js
import LoadScript from '@/plugins/loadScript';
// 引入进度条
import { showProgress, hideProgress } from '@/plugins/progress';
// 引入全局css
import '@/styles/globals.scss';
import 'antd/dist/antd.css';
// 组件
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import ToolBar from '@/components/ToolBar';
import Service from '@/components/Service';
import CompanyProduct from '@/components/CompanyProduct'; // 公司旗下产品
import Spin from '@/components/Spin';
import Favicon from "@/public/favicon.ico";

// 判断auth权限，用户是否登录
import { authRoutes, userLogin } from '@/routes_auth';

/*
*   ***********  用于活动  ***********
*/ 
import THJFixedBanner from '@/public/activity/Activity';
const activityBannerHide = [
  '/login',
  '/custom_tour',
  '/about_us/map',
  '/activity/taohuajie',
  ...authRoutes
];

// 判断是否显示header/toolbar
// 在notShow数组中的路由，则不显示
const hiddenHeader = ['/login', '/activity/taohuajie'],
      hiddenFooter = ['/login', '/activity/taohuajie'];

// 主入口，模板方法
function MyApp({ Component, pageProps }) {
  
  // 页面切换，显示进度条
  const router = useRouter(),
    { route, pathname } = router;
  if(router?.events) {
    router.events.off('routeChangeStart', showProgress);
    router.events.off('routeChangeComplete', hideProgress);
    router.events.on('routeChangeStart', showProgress);
    router.events.on('routeChangeComplete', hideProgress);
    const isLogin = userLogin(router);
    if (!isLogin) {
      return <Spin loading={true} />
    }
  }

  const IsShowHeader = hiddenHeader.includes(pathname) ? null : <Header />;
  const IsShowFooter = hiddenFooter.includes(pathname)
    ? null
    : <>
        <CompanyProduct />  {/* 旗下产品 */}
        <Footer />          {/* 底部 */}
        <ToolBar />         {/* 右侧工具栏 */}
        <Service />         {/* 右侧咨询 */}
      </>;
  // const IsShowTHJFixedBanner = activityBannerHide.includes(route) ? null : <THJFixedBanner />
  const IsShowTHJFixedBanner = ""

  return (  
    <div className="_next">
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover" />
        <meta name="baidu-site-verification" content="code-i3E145I04L" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="keywords" content={Tkd['common'].keywords} />
        <meta name="description" content={Tkd['common'].description} />
        <link rel="icon" type="image/x-icon" href={process.env.basePath + Favicon.src}></link>
        <title>{Tkd['common'].title}</title>
      </Head>
      {/* 加载第三方js */}
      <LoadScript />
      <Provider store={stores}>
        { IsShowHeader }
        {/* 内容 */}
        <div className="page-content">
          <ConfigProvider locale={locale}>
            <Component {...pageProps} />
          </ConfigProvider>
        </div>
        { IsShowFooter }
        { IsShowTHJFixedBanner }
      </Provider>
    </div>
  )
}

export default MyApp;